<template>
  <div class="unitChildChildExhibit-box" id="unit-box-scroll">
    <div
      class="unitChildChildExhibit-heard"
      :style="{
        color: colorList5[store.styleInfo.colorType - 1].fontColor,
        borderColor: colorList5[store.styleInfo.colorType - 1].fontColor,
      }"
      :class="{ noBorderBottom: props.info.children.length === 0 }"
    >
      <span
        :style="{
          color: colorList5[store.styleInfo.colorType - 1].fontColor,
        }"
        class="unitChildChildExhibit-heard-title"
        >{{ props.info.text }}</span
      >
      <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
      <div
        class="unitChildChildExhibit-heard-remarks"
        :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        v-html="getTextHtml(props.info.remarks)"
        :class="'unitChildChildExhibit-heard-remarks' + store.styleInfo.colorType"
      ></div>
      <!-- <textMax
          :title="props.info.text"
          :color="colorList5[store.styleInfo.colorType - 1].fontColor"
          :data="props.info.remarks"
          :modelData="remarks"
          :maxLen="172"
        /> -->
    </div>
    <div
      :class="{
        'child-parent1': props.info.children.length == 1,
        'child-parent2': props.info.children.length == 2,
        'child-parent3': props.info.children.length == 3,
      }"
      v-if="props.info.children.length > 0 && props.info.children.length < 4"
    >
      <div class="item-box" @click="addCurrent(index)" v-for="(item, index) in props.info.children" :key="item.id">
        <div class="active-item" v-show="index == current">
          <buttonStyle :isActive="true" />
        </div>
        <span
          class="active-text"
          :style="{
            color: index == current ? '#333' : colorList5[store.styleInfo.colorType - 1].fontColor,
            fontFamily: store.styleInfo.fontFamily,
          }"
          >{{ item.text }}</span
        >
      </div>
    </div>

    <div class="child-parent4" v-if="props.info.children.length > 3">
      <div class="left-box">
        <arrowLeft
          iconSize="50px"
          @click="addCruuent(1)"
          :color="colorList5[store.styleInfo.colorType - 1].fontColor"
        />
      </div>
      <div class="right-center">
        <div class="item-box-parent" :style="{ transform: `translateX(-${370 * current}px)` }">
          <div class="item-box" @click="addCurrent(index)" v-for="(item, index) in props.info.children" :key="item.id">
            <div class="active-item-box">
              <div class="active-item" v-show="index == current">
                <buttonStyle :isActive="true" />
              </div>
              <span
                class="active-text"
                :style="{
                  color: index == current ? '#333' : colorList5[store.styleInfo.colorType - 1].fontColor,
                  fontFamily: store.styleInfo.fontFamily,
                }"
                >{{ item.text }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <arrowRight
          @click="addCruuent(2)"
          iconSize="50px"
          :color="colorList5[store.styleInfo.colorType - 1].fontColor"
        />
      </div>
    </div>
    <div
      class="childText-info"
      :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor, fontFamily: store.styleInfo.fontFamily }"
      v-if="childremarks"
      v-html="childremarks"
    ></div>

    <auxiliarys
      :moduleId="parmas.id"
      :imgBackground="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
      :exhibitBackground="colorList5[store.styleInfo.colorType - 1].shmentColor"
      :titleColor="colorList5[store.styleInfo.colorType - 1].fontColor"
      :themeColor="colorList5[store.styleInfo.colorType - 1].themeColor"
      @emitExhibits="emitExhibits"
    />
    <div class="exhibit-list" v-if="list.length > 0">
      <t-row :gutter="20">
        <t-col v-for="item in list" :key="item.id">
          <div class="item-style">
            <childInfo :info="item" @click="pathInfo(item.id)" />
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="paginationPage-box" v-if="total !== 0">
      <paginationPage
        v-if="total > 14"
        @change="change"
        :current="parmas.pageNo"
        :pageSize="parmas.pageSize"
        :total="total > 0 ? total : 1"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../../index';
import childInfo from './childInfo.vue';
import paginationPage from '../../components/paginationPage.vue';
import arrowLeft from '../../components/arrowLeft.vue';
import arrowRight from '../../components/arrowRight.vue';
import buttonStyle from './buttonStyle.vue';
import { colorList5 } from '../../../data';
import titles from '../../components/title.vue';
import { useRouter, useRoute } from 'vue-router';
import { urls } from '@/utils/request/upload';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import textMax from '../../components/textMax.vue';
import { getTextHtml, filterHTML, convertToPinyin } from '@/utils/minxin';
import auxiliarys from './auxiliarys/index.vue';
const props = defineProps({
  info: {
    type: Object,
  },
});
const route = useRoute();
const router = useRouter();
const parmas = reactive({
  pageSize: 14,
  pageNo: 1,
  id: 0,
  value: '',
});
const remarks = ref('');
const childremarks = ref('');
const total = ref(0);
const list = ref([]);
const loading = ref(false);
remarks.value = getTextHtml(props.info.remarks);
const store = useProjectStore();
const current = ref(0);

const addCurrent = (index: number) => {
  current.value = index;
  parmas.id = props.info.children[current.value].id;
  childremarks.value = getTextHtml(props.info.children[current.value].remarks);
  initList();
};
const addCruuent = (type: number) => {
  if (type === 1) {
    if (current.value == 0) {
      current.value = props.info.children.length - 1;
    } else {
      current.value = current.value - 1;
    }
  } else {
    if (current.value == props.info.children.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  }
  parmas.id = props.info.children[current.value].id;
  childremarks.value = getTextHtml(props.info.children[current.value].remarks);
  initList();
};
const emitExhibits = (moduleId: number, id: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: {
      showpieceid: id,
      moduleId: moduleId,
    },
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
const change = (e: any) => {
  // console.log(e);
  parmas.pageNo = e.page;
  initList();
};
const initList = async () => {
  try {
    loading.value = true;
    let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);
    list.value = res.data.data;
    total.value = res.data.total;
    // console.log(total.value);

    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const pathInfo = (id: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: {
      showpieceid: id,
      moduleId: parmas.id,
    },
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
if (props.info.children.length === 0) {
  parmas.id = props.info.id;
  initList();
} else {
  childremarks.value = getTextHtml(props.info.children[0].remarks);
  parmas.id = props.info.children[0].id;
  // console.log(parmas.id, '获取');
  initList();
}
// onMounted(() => {
//   setTimeout(() => {
//     nextTick(() => {
//       // var dom = document.getElementById('unit-box-scroll');
//       // dom.scrollIntoView();
//       const ele = document.getElementById('unitChildChildExhibit-Scorll'); // 获取元素
//       const top = ele.offsetTop + 500; // 获取元素距离文档顶部的距离
//       window.scrollTo({
//         top: top,
//       });
//     });
//   }, 300);
// });
</script>

<style lang="less" scoped>
.unitChildChildExhibit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  min-height: 60vh;
  padding-bottom: 220px;
  :deep(.auxiliarys-box-parent) {
    width: 100%;
  }
}
.unitChildChildExhibit-heard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1180px;
  border-bottom: 1px solid transparent;
}
.unitChildChildExhibit-heard-title {
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  color: #cbb995;
  line-height: 34px;
  // margin-bottom: 32px;
  // font-weight: 400;
}
.unitChildChildExhibit-heard-remarks {
  display: flex;
  flex-direction: column;
  width: 1180px;
  margin-top: 32px;
  :deep(span) {
    display: inline-block;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;

    color: #333333;
    line-height: 32px;
    text-align: justify;
    text-indent: 2em;
    margin-bottom: 20px;
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
  // margin-bottom: 50px;
}
.unitChildChildExhibit-heard-remarks1 {
  :deep(span) {
    color: #e9d5b0;
  }
}
.unitChildChildExhibit-heard-remarks2 {
  :deep(span) {
    color: #cbb995;
  }
}
.unitChildChildExhibit-heard-remarks3 {
  :deep(span) {
    color: #e9d5b0;
  }
}
.item-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 320px;
  height: 52px;
}
.active-item-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 320px;
  height: 52px;
}
.active-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 52px;
}
.active-text {
  position: relative;
  z-index: 12;
  display: flex;
  justify-content: center;
  width: 80%;
  height: 28px;
  text-align: center;
  font-size: 18px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  color: #333333;
  line-height: 28px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 添加省略号 */
}
.child-parent1 {
  margin-top: 32px;
  margin-bottom: 50px;
}
.child-parent2 {
  margin-top: 32px;
  margin-bottom: 50px;
  display: flex;
  width: 690px;
  // width: 1000px;
  justify-content: space-between;
  align-items: center;
}
.child-parent3 {
  margin-top: 32px;
  margin-bottom: 50px;
  display: flex;
  width: 1000px;
  justify-content: space-between;
  align-items: center;
}
.child-parent4 {
  margin-top: 32px;
  margin-bottom: 50px;
  display: flex;
  width: 1180px;
  justify-content: space-between;
  align-items: center;
  :deep(.item-box) {
    margin-right: 50px;
  }
}
.left-box {
  width: 40px;
}
.item-box-parent {
  display: flex;
  transition: all 0.5s;
}
.right-center {
  width: 1000px;
  overflow: hidden;
}
.right-box {
  width: 40px;
}
.exhibit-list {
  display: flex;
  width: 1180px;
  margin: 0 auto;
  margin-top: 80px;
}
.item-style {
  width: 280px;
}
.t-col {
  margin-bottom: 0px;
}
.t-row {
  margin-top: 0px;
}
.btm-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  span {
    font-size: 18px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    color: #ffffff;
    line-height: 28px;
    color: #fff;
    text-align: center;
    width: 100%;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 添加省略号 */
  }
}
.item3-box-child1 {
  display: flex;
  flex-direction: column;
}
.item3-box {
  display: flex;
  width: 1180px;
  margin: 0 auto;
  justify-content: space-between;
}
.item3-box-child1 {
  width: 280px;
  display: flex;
  flex-direction: column;
}
.paginationPage-box {
  width: 100%;
  margin: 80px 0;
  margin-bottom: 80px !important;
}
.childText-info {
  width: 860px;

  color: #cbb995;
  opacity: 0.58;
  span {
    display: flex;
    width: 100%;
    text-align: justify;
    white-space: pre-wrap; /* 不换行 */
    line-height: 30px;
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  }
}
.noBorderBottom {
  border-bottom: none !important;
}
.subTitle {
  margin-top: 8px;
  color: #e9d5b0;
  font-family: 'SourceHanSerifCN-medium';
  font-size: 20px;
  font-style: normal;

  line-height: 30px; /* 150% */
}
</style>
